<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

const data = ref({
  id:'',
  poolCode: '',
  poolName: '',
  valveType: '',
  location:'',
  pipeCode:'',
  remark: '',
});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  }, 
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      console.log("modalData:", modalData);
      const actualData = modalData.data;
      if (actualData) {
        data.value = { ...data.value, ...actualData };
      }
    }
  },
  title: '阀池详情',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>阀池ID:</strong> {{ data.id }}</p>
        <p><strong>阀池编号:</strong> {{ data.poolCode }}</p>
        <p><strong>阀池名称:</strong> {{ data.poolName }}</p>
        <p><strong>阀池类型:</strong> {{ data.valveType }}</p>
        <p><strong>位置:</strong> {{ data.location }}</p>
        <p><strong>所属管道:</strong> {{ data.pipeCode }}</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}
</style>
